<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/carts.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/carts.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
    <section class="cartMain">
        <div class="cartMain_hd">
            <ul class="order_lists cartTop">
                <li class="list_chk">
                    <!--所有商品全选-->
                    <input type="checkbox" id="all" class="whole_check">
                    <label for="all"></label>
                    全选
                </li>
                <li class="list_con">商品信息</li>
                <li class="list_info">商品参数</li>
                <li class="list_price">单价</li>
                <li class="list_amount">数量</li>
                <li class="list_sum">金额</li>
                <li class="list_op">操作</li>
            </ul>
        </div>

        <div class="cartBox">
            <script>

            var carboxfath = $(".cartBox");
			var div1 = $("<div class='shop_info'></div>")
			var div2 = $("<div class='all_check'><input type='checkbox' id='shop_a' class='shopChoice' /></div>");
			var carbox = $("<div class='order_content'></div>");
			div1.append(div2);
			carboxfath.append(div1);
			carboxfath.append(carbox);
			
			
			$.ajax({
					url:"/daojucheng/mycar",
					success:function(data){
						if(data!=null){
							var goodslist = JSON.parse(data);
							console.log(goodslist);
							$.each(goodslist,function(index,item){
									var ul = $("<ul class='order_lists'></ul>")
									var li1 = $("<li class='list_chk'><input type='checkbox' id='checkbox_"+(index+3)+"' class='son_check'><label for='checkbox_"+(index+3)+"'></label></li>");
									var li2 = $("<li class='list_con'><div class='list_img'><a href='#'><img src='"+item.goods_img+"'></a></div><div class='list_text'><a href='#'>"+item.goods_name+"</a></div></li>")
									var li3 = $("<li class='list_info'><p>商品类型:"+item.goods_type+"</p><p>期限:"+item.goods_limit+"天</p></li>");
									var li4 = $("<li class='list_price'><p class='price'>￥"+item.goods_price+"</p></li>");
									var li5 = $("<li class='list_amount'><div class='amount_box'><a href='javascript:;' class='reduce reSty'>-</a><input type='text' value='1' class='sum'><a href='javascript:;' class='plus'>+</a></div></li>");
									var li6 = $("<li class='list_sum'><p class='sum_price'>￥"+item.goods_price+"</p></li>");
									var li7 = $("<li class='list_op'><p class='del'><a href='javascript:;' class='delBtn'>移除商品</a></p></li>");

									ul.append(li1);
									ul.append(li2);
									ul.append(li3);
									ul.append(li4);
									ul.append(li5);
									ul.append(li6);
									ul.append(li7);
									carbox.append(ul);
								});
						}else{
								
							}
						},
					error:function(){
						alert("服务器错误");
						}
				});
			
            </script>
        </div>


        <!--底部-->
        <div class="bar-wrapper">
            <div class="bar-right">
                <div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
                <div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
				
                <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;"> <button data-method="notice" class="layui-btn">结算</button></div>
					
            </div>
			
        </div>
    </section>
    <section class="model_bg"></section>
    <section class="my_model">
        <p class="title">删除宝贝<span class="closeModel">X</span></p>
        <p>您确认要删除该宝贝吗？</p>
	
        <div class="opBtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;" class="dialog-close">关闭</a></div>
		
    </section>
	<script>
	layui.use('layer', function(){ //独立版的layer无需执行这一句
	  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
	  
	  //触发事件
	  var active = {
	    setTop: function(){
	      var that = this; 
	      //多窗口模式，层叠置顶
	      layer.open({
	        type: 2 //此处以iframe举例
	        ,title: '当你选择该窗体时，即会在最顶端'
	        ,area: ['390px', '260px']
	        ,shade: 0
	        ,maxmin: true
	        
	        ,content: '//layer.layui.com/test/settop.html'
	        ,btn: ['继续弹出', '全部关闭'] //只是为了演示
	        ,yes: function(){
	          $(that).click(); 
	        }
	        ,btn2: function(){
	          layer.closeAll();
	        }
	        
	        ,zIndex: layer.zIndex //重点1
	        ,success: function(layero){
	          layer.setTop(layero); //重点2
	        }
	      });
	    }
	 
	    ,notice: function(){
	      //示范一个公告层
	      layer.open({
	        type: 1
	        ,title: false //不显示标题栏
	        ,closeBtn: false
	        ,area: '300px;'
	        ,shade: 0.8
	        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
	        ,btn: ['确定', '拒绝']
	        ,btnAlign: 'c'
	        ,moveType: 1 //拖拽模式，0或者1
	        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">请问您是否确定付款？</div>'
	        ,success: function(layero){
	          var btn = layero.find('.layui-layer-btn');
	          btn.find('.layui-layer-btn0').attr({
	            href: 'http://www.layui.com/'
	            ,target: '_blank'
	          });
	        }
	      });
	    }
	
	  };
	  
	  $('#layerDemo .layui-btn').on('click', function(){
	    var othis = $(this), method = othis.data('method');
	    active[method] ? active[method].call(this, othis) : '';
	  });
	  
	});
	</script>
</body>
</html>